<%--
  Created by IntelliJ IDEA.
  User: weter
  Date: 2023/6/16
  Time: 13:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title></title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="order by dede58.com" name="author"/>
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Float-Admin</title>

    <!-- Common plugins -->
    <link href="${pageContext.request.contextPath}../../static/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}../../static/css/simple-line-icons.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}../../static/css/font-awesome.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}../../static/css/pace.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}../../static/css/jasny-bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}../../static/css/nanoscroller.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}../../static/css/metismenu.min.css" rel="stylesheet">
    <!-- dataTables -->
    <link href="${pageContext.request.contextPath}../../static/css/jquery.datatables.min.css" rel="stylesheet"
          type="text/css">
    <link href="${pageContext.request.contextPath}../../static/css/responsive.bootstrap.min.css" rel="stylesheet"
          type="text/css">
    <!--template css-->
    <link href="${pageContext.request.contextPath}../../static/css/style.css" rel="stylesheet">

    <link href="${pageContext.request.contextPath}../../static/css/jquery-ui.css" rel="stylesheet">

    <script src="${pageContext.request.contextPath}../../static/js/html5shiv.min.js"></script>
    <script src="${pageContext.request.contextPath}../../static/js/respond.min.js"></script>
</head>
<style>
    #dialog-form .ui-button-text:nth-child(1) {
        background-color: green !important;
    }

    /* 不通过按钮样式 */
    #dialog-form .ui-button-text:nth-child(2) {
        background-color: red !important;
    }
</style>
<body>

<%--    弹窗--%>
<div id="dialog-form" style="overflow: hidden;display: none" title="审核产品订单">
    <h4 style="margin: auto;">是否要进行发货</h4>
</div>
<!-- /vertical form -->


<div id="dialog-was" style="overflow: hidden;display: none" title="审核产品订单">
    <h4 style="margin: auto;">是否要生产订单</h4>
</div>
<%--    表格数据--%>
<section class="main-content" style="margin-left: 0px; padding: 0;width: 1210px;height: 702px">
    <!--page header start-->
    <div class="page-header">
        <div class="row">
            <div class="col-sm-6">
                <h4>Data Tables</h4>
            </div>
            <div class="col-sm-6 text-right">
                <ol class="breadcrumb">
                    <li><a href="javascript: void(0);"><i class="fa fa-home"></i></a></li>
                    <li>tables</li>
                    <li>data tables</li>
                </ol>
            </div>
        </div>
    </div>


    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default collapsed">
                <div class="panel-heading">
                    Responsive Data tables
                </div>


                <div class="panel-body">
                    <table class="table table-striped dt-responsive nowrap" id="datatable">
                        <%--表头--%>
                        <thead>
                        <table id="datatable1" class="table table-striped dt-responsive nowrap table-hover">
                            <thead>
                            <tr id="t1">


                                <th style="width:100px">
                                    <strong>产品订单号</strong>
                                </th>
                                <th style="width:100px">
                                    <strong>尺寸</strong>
                                </th>
                                <th style="width:150px">
                                    <strong>产名</strong>
                                </th>
                                <th style="width:130px">
                                    <strong>数量</strong>
                                </th>
                                <th style="width:200px">
                                    <strong>客户名</strong>
                                </th>
                                <th style="width:200px">
                                    <strong>地址</strong>
                                </th>
                                <th style="width:200px">
                                    <strong>电话</strong>
                                </th>
                                <th style="width:200px">
                                    <strong>销售订单号</strong>
                                </th>
                                <th style="width:200px">
                                    <strong>状态</strong>
                                </th>
                                <th style="width:100px">
                                    <strong>操作</strong>
                                </th>
                            </tr>
                            </thead>
                        </table>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>


</section>

<script src="${pageContext.request.contextPath}../../static/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}../../static/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}../../static/js/pace.min.js"></script>
<script src="${pageContext.request.contextPath}../../static/js/jasny-bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}../../static/js/jquery.slimscroll.min.js"></script>
<script src="${pageContext.request.contextPath}../../static/js/jquery.nanoscroller.min.js"></script>
<script src="${pageContext.request.contextPath}../../static/js/metismenu.min.js"></script>
<script src="${pageContext.request.contextPath}../../static/js/float-custom.js"></script>

<!-- Datatables-->
<script src="${pageContext.request.contextPath}../../static/js/jquery.datatables.min.js"></script>
<script src="${pageContext.request.contextPath}../../static/js/datatables.responsive.min.js"></script>
<script src="${pageContext.request.contextPath}../../static/js/jquery-ui.min.js"></script>
<script src="${pageContext.request.contextPath}../../static/js/jquery.ui.custom.js"></script>
<script>

    let dataTable = $('#datatable1').DataTable({
        // 设置列定义
        columns: [
            {data: 'productOrderCode'},
            {data: 'sizeId'},
            {data: 'productName'},
            {data: 'productNumber'},
            {data: 'customName'},
            {data: 'customAddress'},
            {data: 'customPhone'},
            {data: 'salesOrderNo'},
            {data: 'productOrderStatus'}
        ]
    });
    getSaleProducts();

    function getSaleProducts() {
        let Products = "";
        $.ajax({
            "url": "product/getProductOrder",                      // 要提交的URL路径
            "type": "get",                     // 发送请求的方式
            "data": {},                      // 要发送到服务器的数据
            "dataType": "json",                   // 期望接受的数据格式
            "success": function (result) { // 请求成功后要执行的代码
                for (let index in result) {
                    let ele = "";
                    let statusText = "";
                    let status = result[index].productOrderStatus
                    console.log(status)
                    if (status == 1) {
                        ele = `<button onclick="checkOut(${result[index].id},${result[index].sizeId})" style="background-color:rgb(88,180,224);color:white" class="btn btn-default" id="dialog-form-opener" type="button">
    CheckOut
    </button>`
                        statusText = "待审核"
                    } else if (status == 2) {
                        let ele = ""
                        statusText = "审核不通过"
                    } else if (status == 3) {

                        statusText = "已发货"
                    } else if (status == 4) {
                        let ele = ""
                        statusText = "生产订单待审"
                    } else if (status == 5) {
                        let ele = ""
                        statusText = "完成"
                    }
                    Products += ` <tr>

    <td>${result[index].productOrderCode}</td>
    <td>${result[index].sizeId}</td>
    <td>${result[index].productName}</td>
    <td>${result[index].productNumber}</td>
    <td>${result[index].customName}</td>
    <td>${result[index].customAddress}</td>
    <td>${result[index].customPhone}</td>
    <td>${result[index].salesOrderNo}</td>
    <td>${statusText}</td>
    <td>${ele}
    </td>
    </tr>
    `
                }
                if (dataTable) {
                    dataTable.destroy(); // 销毁旧的DataTable实例
                }
                dataTable.rows.add(result).draw();
                $('#datatable1 tbody').html(Products); // 更新表格数据
                dataTable = $('#datatable1').DataTable({
                    "order": [[0, 'asc']], // 默认按第一列升序排序
                    "paging": true // 启用分页功能，根据需求设置其他分页选项
                });
            },
            "error": function () {
                alert("数据响应时间过长！请重新加载")
            }
        });


    }

    function checkOut(id, sizeId) {

        $('#dialog-form').dialog('open');
        $('#dialog-form').dialog({
            autoOpen: false,
            modal: true,
            width: 500,
            buttons: {
                通过: function () {

                    was(id, sizeId)
                    $(this).dialog('close');


                },
                不通过: function () {

                    NotGo(id)
                    $(this).dialog('close');
                }
            }
        });

    }

    function was(id, sizeId) {
        if ($('#dialog-was').hasClass('ui-dialog-content')) {
            $('#dialog-was').dialog('open');
        } else {
            $('#dialog-was').dialog({
                autoOpen: true,
                modal: true
            });
        }
        $('#dialog-was').dialog({
            autoOpen: false,
            modal: true,
            width: 500,
            buttons: {
                通过: function () {
                    let request_body = {id: id, sizeId: sizeId}
                    $.ajax({
                        "url": "product/Checkout",
                        "type": "post",
                        "data": JSON.stringify(request_body),
                        "dataType": "json",
                        'contentType': 'application/json;charset=utf-8',
                        "success": function (result) {
                            if (result.code == "200") {
                                alert(result.msg)
                                location.reload()
                            } else if (result.code == "201") {
                                location.reload()
                                alert(result.msg)
                            } else if (result.code == "202") {
                                location.reload()
                                alert(result.msg)
                            } else if (result.code == "400") {
                                alert(result.msg)
                            }

                        }, "error": function () {
                            alert("数据响应时间过长！请重新加载")
                        }
                    });
                    $(this).dialog('close');

                }, 不通过: function () {


                    $(this).dialog('close');
                }
            }
        });
    }


    function NotGo(id) {

        $.ajax({
            "url": "product/UpdateState/" + id,
            "type": "post",
            "dataType": "json",
            'contentType': 'application/json;charset=utf-8',
            "success": function (result) {
                if (result.code === 200) {
                    location.reload()
                } else {
                    alert(result.msg)
                }
            }, "error": function () {
                alert("出错了")
            }
        })

    }


</script>
</body>
</html>

